<template>
  <div class="homeView">
    <div class="content">
      <div class="header">
        <navbar></navbar>
      </div>
      <div class="containers">
        <img :src="leftimg" style="height: 900px; float: left; position: absolute; left: 0; top: 60px; bottom: 0"/>
        <img :src="rightimg" style="height: 900px; float: right;  position: absolute; right: 0; top: 60px; bottom: 0"/>
      </div>
      <div class="center">
        <div class="topTitle">
          <div class="left"><img :src="titleleft"/></div>
          <div class="centerT">欢迎{{this.userrole }}{{this.username}}!</div>
          <div class="right" ><img :src="titleright"  /></div>
        </div>
          <div class="tableList">
            <el-row :gutter="20">
              <el-col :span="6"><div class="grid-content bg-purple" @click="goEquip">
                <div class="equipimg">
                    <img :src="equipimg"/>
                </div>
                <div class="rightc">
                  <p class="p1">设备</p>
                  <p class="p2">从多维度管理设备全生命周期</p>
                </div>
              </div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple" @click="goCenter">
                <div class="equipimg">
                  <img :src="info"/>
                </div>
                <div class="rightc">
                  <p class="p1">消息中心</p>
                  <p class="p2">实时消息管理</p>
                </div>
              </div></el-col>

              <el-col :span="6"><div class="grid-content bg-purple" @click="goConsole">
                <div class="equipimg">
                    <img :src="jiankong"/>
                </div>
                <div class="rightc">
                  <p class="p1">监控管理</p>
                  <p class="p2">实时监控展示及管理</p>
                </div>
              </div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple" @click="goCalendar">
                <div class="equipimg">
                  <img :src="rili"/>
                </div>
                <div class="rightc">
                  <p class="p1">日历</p>
                  <p class="p2">以日历方式管理零配件到期、维保到期、年审到期等多种到期提醒</p>
                </div>
              </div></el-col>
            </el-row>
          </div>
          <div class="tableList" style="margin-top: 40px">
            <el-row :gutter="20">
              <el-col :span="6"><div class="grid-content bg-purple" @click="goReports">
                <div class="equipimg">
                  <img :src="baobiao"/>
                </div>
                <div class="rightc">
                  <p class="p1">报表</p>
                  <p class="p2">提供日报、周报、月报、年报等多种报表供查询和管理</p>
                </div>
              </div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple" @click="goProject">
                <div class="equipimg">
                  <img :src="wlwg"/>
                </div>
                <div class="rightc" >
                  <p class="p1">物联网管理</p>
                  <p class="p2">从项目建档到物联网设备接入全生命周期管理</p>
                </div>
              </div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">
                <div class="equipimg">
                  <!--<img :src="equipimg"/>-->
                </div>
                <div class="rightc" style="line-height: 220px; font-size: 26px; color: #00a9fc;">
                  ...
                  <!--<p class="p1"></p>-->
                  <!--<p class="p2"></p>-->
                </div>
              </div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">
                <div class="equipimg">
                  <!--<img :src="equipimg"/>-->
                </div>
                <div class="rightc" style="line-height: 220px; font-size: 26px; color: #00a9fc;">
                  ...
                  <!--<p class="p1">设备</p>-->
                  <!--<p class="p2">设备相关描述信息</p>-->
                </div>
              </div></el-col>
            </el-row>
          </div>
      </div>
      <div class="footer">
        <div class="footerLeft">
          <img :src="wdrLOGO" style="border-right: 1px solid #ccd6db; padding-right: 20px"/>
          <!--<span>|</span>-->
          <img :src="gqLOGO" style="border-right: 1px solid #ccd6db; padding-left: 0px"/>
          <img :src="ltLOGO"/>
        </div>
        <div class="footerCenter">
          <a href="http://www.miitbeian.gov.cn">粤ICP备19000162号-1</a>
        </div>
        <div class="footerRight">
         Copyright &copy;广州物大人科技责任有限公司 All Right Reserved
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import leftimg from '@/assets/homeOverview/leftimg.png'
  import rightimg from '@/assets/homeOverview/rightimg.png'
  import titleleft from '@/assets/homeOverview/titleleft.png'
  import titleright from '@/assets/homeOverview/titleright.png'
  import equipimg from '@/assets/homeOverview/equipimg.png'
  import jiankong from '@/assets/homeOverview/jiankong.png'
  import rili from '@/assets/homeOverview/rili.png'
  import baobiao from '@/assets/homeOverview/baobiao.png'
  import info from '@/assets/homeOverview/info.png'
  import wlwg from '@/assets/homeOverview/wlwg.png'
  import wdrLOGO from '@/assets/homeOverview/wdrLOGO.png'
  import gqLOGO from '@/assets/homeOverview/gqLOGO.png'
  import ltLOGO from '@/assets/homeOverview/ltLOGO.png'
  import wdrlogo1 from '@/assets/home/wdrlogo1.png'
  import navbar from './Navbar.vue'
  import axios from 'axios'
  export default {
    components: {
      navbar
    },
    data() {
      return {
        leftimg,
        rightimg,
        titleleft,
        titleright,
        equipimg,
        jiankong,
        rili,
        baobiao,
        info,
        wdrlogo1,
        wlwg,
        wdrLOGO,
        gqLOGO,
        ltLOGO,
        userInfo: {},
        username: '',
        userrole: '',
        submitdata: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'get_template_jur'
        },
        userAllRole: [],
        wlwMassage: '',
        sbMassage: '',
        infoMassage: '',
        mapMassage: '',
        calearMassage: '',
        listMassage: ''

      }
    },
    mounted() {
      this.userInfo = JSON.parse(window.localStorage.getItem('user_info'))
      this.username = this.userInfo.name
      this.userrole = this.userInfo.org
      this.getMenu()
    },
    methods: {
      // 获取菜单
      getMenu() {
        let authen = this.$store.getters.authen
        var arr = []
        for (let i = 0; i < authen.length; i++) {
          arr.push(authen[i].jur)
        }
        for (let j = 0; j < arr.length; j++) {
          if (arr[j].indexOf('root.menu.iots') !== -1) {
            this.sbMassage = arr[j]
          }
          if (arr[j].indexOf('root.menu.message') !== -1) {
            this.infoMassage = arr[j]
          }
          if (arr[j].indexOf('root.menu.monitor') !== -1) {
            this.mapMassage = arr[j]
          }
          if (arr[j].indexOf('root.menu.calendar') !== -1) {
            this.calearMassage = arr[j]
          }
          if (arr[j].indexOf('root.menu.sys_monitor') !== -1) {
            this.wlwMassage = arr[j]
          }
          if (arr[j].indexOf('root.menu.reports') !== -1) {
            this.listMassage = arr[j]
          }
        }
      },
      // 设备
      goEquip() {
        if (this.sbMassage !== '') {
          this.$router.push({ path: '/monitor/iots' })
        } else {
          this.$message({
            type: 'error',
            message: '您暂无此访问权限，请联系管理员开通!'
          })
        }
      },
      // 监控
      goConsole() {
        if (this.mapMassage !== '') {
          this.$router.push({ path: '/monitor' })
        } else {
          this.$message({
            type: 'error',
            message: '您暂无此访问权限，请联系管理员开通!'
          })
        }
      },
      // 消息
      goCenter() {
        if (this.infoMassage !== '') {
          this.$router.push({ path: '/message' })
        } else {
          this.$message({
            type: 'error',
            message: '您暂无此访问权限，请联系管理员开通!'
          })
        }
      },
      // 报表
      goReports() {
        if (this.listMassage !== '') {
          this.$router.push({ path: '/monitor/reports' })
        } else {
          this.$message({
            type: 'error',
            message: '您暂无此访问权限，请联系管理员开通!'
          })
        }
      },
      // 日历
      goCalendar() {
        if (this.calearMassage !== '') {
          this.$router.push({ path: '/monitor/calendar' })
        } else {
          this.$message({
            type: 'error',
            message: '您暂无此访问权限，请联系管理员开通!'
          })
        }
      },
      // 项目管理
      goProject() {
        if (this.wlwMassage !== '') {
          this.$router.push({ path: '/monitor/system/project' })
        } else {
          this.$message({
            type: 'error',
            message: '您暂无此访问权限，请联系管理员开通!'
          })
        }
      },
      // 判断用户有没有管理端权限
      getUserRole() {
        let web = process.env.SERVER_URL_4A
        axios.post(web + '/authen', this.submitdata, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.userAllRole = res.data.datas
        })
          .catch(function(error) {
            console.log(error)
          })
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  /*background: -webkit-linear-gradient(to right, #0072f3,#00a9fc);*/
  /*background: -o-linear-gradient(to right, #0072f3,#00a9fc);*/
  /*background: -moz-linear-gradient(to right, #0072f3,#00a9fc);*/
  /*background: linear-gradient(to right, #0072f3,#00a9fc);*/
.homeView{
  width: 100%;
  height: 100%;
  background-color: #E2ECF2;
  .content{
    width: 100%;
    height: 960px;
    .header{
      position: fixed;
      width: 100%;
      height: 60px;
      line-height: 70px;
      padding-left: 20px;
      top:0;
      background: -webkit-linear-gradient(to right, #0072f3,#00a9fc);
      background: -o-linear-gradient(to right, #0072f3,#00a9fc);
      background: -moz-linear-gradient(to right, #0072f3,#00a9fc);
      background: linear-gradient(to right, #0072f3,#00a9fc);
    }
    .containers{
      width: 100%;
      height: 900px;
      overflow: auto;
      /*margin-top:60px;*/
      /*background-color: #E2ECF2;*/
    }
    .center{
      width: 100%;
      height: 900px;
      position: absolute;
      top:60px;
      z-index: 2;
      .topTitle{
        width: 74%;
        height: 220px;
        margin-left: 13%;
        line-height: 220px;
        .left{
          width: 24%;
          float: left;
          height: 220px;
        }
        .centerT{
          float: left;
          width: 52%;
          height: 220px;
          font-size: 32px;
          text-align: center;
          color: #00a9fc;
        }
        .right{
          float: right;
          width: 24%;
        }
      }
      .tableList{
        width: 74%;
        height: 240px;
        margin-left: 13%;
        .equipimg{
          width: 96px;
          height: 96px;
          padding-top: 74px;
          padding-left: 40px;
          float: left;
        }
        .rightc{
          width: 140px;
          height: 240px;
          float: right;
          margin-right: 40px;
          .p1{
            color: #00a9fc;
            font-size: 18px;
            margin-top:85px;
          }
          .p2{
            color: #00a9fc;
            font-size: 14px;
          }
        }
        .el-row {
          margin-bottom: 20px;
          &:last-child {
            margin-bottom: 0;
          }
        }
        .el-col {
          border-radius: 0px;
        }
        .bg-purple-dark {
          background: #fff;
        }
        .bg-purple {
          background: #fff;
        }
        .bg-purple-light {
          background: #fff;
        }
        .grid-content {
          border-radius: 0px;
          height: 240px;
          cursor: pointer;
          box-shadow:1px 0px 1px 1px #cad8dd;
        }
        .grid-content:hover {
          border: 1px solid #00a9fc;
          box-shadow:1px 0px 1px 1px #cad8dd;
        }
        .row-bg {
          padding: 10px 0;
          background-color: #f9fafc;
        }
      }
    }
    .footer{
      position:fixed;
      left:0px;
      bottom:0px;
      width:100%;
      height:60px;
      z-index:9999;
      .footerLeft{
        width: 57.3%;
        height: 60px;
        float: left;
        line-height: 55px;
        padding-left: 13%;
        img{
          vertical-align: middle;
        }
      }
      .footerCenter{
        width: 10%;
        height: 60px;
        font-size: 14px;
        float: left;
        line-height: 60px;
        cursor: pointer;
        color: #666;
      }
      .footerRight{
        width: 32.7%;
        height: 60px;
        float: right;
        line-height: 60px;
        font-size: 14px;
        color: #666;
      }
    }
  }
}
</style>
